<template>
<el-scrollbar style="height:100%;">
  <div class="container p-40" v-loading="hasLoading">
    <div>
      <el-form disabled ref="basicForm" :rules="rules" :model="basicForm" label-width="1.4rem">
        <p class="f-17 m-b-20">处理工单</p>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="工单类型">
              <el-input placeholder="请输入" :value="basicForm.typeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单状态">
              <el-input placeholder="请输入" :value="basicForm.workOrderStatus | workOrderStatusFilter"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="提交人">
              <el-input placeholder="请输入" :value="basicForm.submitter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input placeholder="请输入" :value="basicForm.submitterContactInformation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提交时间">
              <el-input placeholder="请输入" :value="basicForm.creationDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="24">
            <el-form-item label="工单内容">
              <el-input placeholder="请输入" :rows="3" type="textarea" :value="basicForm.workOrderContent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="处理人">
              <el-input placeholder="请输入" :value="basicForm.handler"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input placeholder="请输入" :value="basicForm.handlerContactInformation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :disabled="!isUpdate" ref="basicForm" :rules="rules" :model="basicForm" label-width="1.4rem">
        <el-row :gutter="40">
          <el-col :span="24">
            <el-form-item label="处理结果" prop="processingResults">
              <el-input v-model="basicForm.processingResults" type="textarea" show-word-limit maxlength="400" :rows="3">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="isUpdate||basicForm.scenePicture">
            <el-form-item label="现场图">
              <up-img ref="uploadImg" v-model="basicForm.scenePicture" :imgLength="isUpdate?7:0" imgWidth="150px"
                imgHeight="100px"></up-img>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="center" style="margin-top: 0.2rem">
        <el-col :span="4" :offset="10">
          <el-button v-if="isUpdate" type="primary" @click="submitForm" :loading="hasSubmit">确定</el-button>
          <el-button @click="colse">取消</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</el-scrollbar>
</template>

<script>
  import upImg from '@/components/upImg'
  import { getUserInfo, employee } from "@/api/common/common"
  import { getWorkOrderById, handleByWorkOrder } from "@/api/operations/workOrder"

  export default {
    components: {
      upImg
    },
    data() {
      return {
        hasLoading: false,
        hasSubmit: false,
        isUpdate: false, //是否修改
        basicForm: {}, //原始表单
        form2: {}, //可输入表单
        rules: {
          processingResults: [{
            required: true,
            message: "请输入处理结果",
            trigger: "blur"
          }]
        },
      };
    },
    methods: {
      loadDetail(id) {
        this.hasLoading = true;

        getWorkOrderById(id).then(res => {
          this.basicForm = res.data;
          //如果是修改的 回显员工姓名
          if (this.isUpdate) {
            let user = this.$store.state.user;
            this.basicForm.handler = user.loginName;
            //如果当前登录人有对应员工账号
            if (user.empId) {
              //返回新的Promise
              return employee(user.empId);
            }
          }
        }).then((res) => {
          //上面有empid的话则等待后res!=undinfind
          if (res) {
            this.basicForm.handlerContactInformation = res.data && res.data.mobileno;
          }
        }).finally(() => {
          this.hasLoading = false;
        });
      },
      submitForm() {
        this.$refs["basicForm"].validate((valid) => {
          if (valid) {
            if (this.isUpdate) {
              this.hasSubmit = true;
              this.$refs.uploadImg.submit().then(() => {
                handleByWorkOrder(this.basicForm).then((result) => {
                  if (result.code === 10000) {
                    this.$message.success(result.msg);
                    this.colse();
                  }
                }).finally(_ => {
                  this.hasSubmit = false;
                });
              });
            }
          }
        });
      },
      colse() {
        window.history.go(-1);
      },
    },
    mounted() {
        let query = this.$route.query;
        if (query.id) this.loadDetail(query.id);
        if (query.update) {
            if (this.$store.state.user.loginId==-1){ 
                this.$tips.show({ message: "内置管理员不允许处理工单" });
                history.go(-1);
            }
            this.isUpdate = true;
        }
    },
  };
</script>
<style scoped>
</style>
